%loadingTab {

  &.loading {

    > svg.loading {
      position: absolute;
      top: 30%;
      left: calc(50% - 18px);
    }

    > div {
      visibility: hidden;
    }
  }
}

p.desc {
  color: $textColorLight;
  margin-top: 10px;
  line-height: 150%;
}

body > section#wrapper {
  position: relative;
  display: flex;
  flex-flow: row;

  > main {
    position: relative;
    flex: 1;
    height: calc(100vh - #{$settingsHeaderHeight} - 10px);
    overflow-y: scroll;
    margin-top: 10px;
    padding: 35px 30px 20px 70px;

    @media (max-width: 1400px) {
      padding-left: 50px;
      padding-right: 20px;
    }

    > div.tab {
      display: none;

      &.active {
        display: block;
      }

      @extend %loadingTab;

      > div[data-name] {
        display: none;

        &.active {
          display: block;
        }

        @extend %loadingTab;
      }
    }

    div.contentBox {
      position: relative;
      background: $contentBackground;
      padding: 16px 20px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 1024px;
      margin: 0 0 20px;
      border-radius: 10px;
      line-height: 140%;
    }

    div.boxWrapper {
      position: relative;
      display: flex;
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: space-between;
      max-width: 1024px;

      @media (max-width: 1100px) {
        display: block;
      }

      > div.box {
        position: relative;
        width: calc(50% - 10px);
        max-width: 520px;
        margin-bottom: 20px;
        background: $contentBackground;
        padding: 16px 20px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;

        @media (max-width: 1100px) {
          width: 100%;
        }

        &.hidden {
          display: none;
        }

        > label {
          margin: 0 0 20px 0;
        }

        p.info {
          margin: 20px 0 10px;
          line-height: 150%;
        }
      }

      &.noCol {
        flex-flow: column;

        > div.box {
          width: 100%;
        }
      }
    }
  }
}

@import "../../rtl/include/settings/content";